 import React, { Component } from 'react';
import {Container} from './style'
import axios from "axios"

// import querystring from 'querystring'

import {connect} from "react-redux"
// import {setToken} from '../../store/action/userAction'
import {withRouter,NavLink} from 'react-router-dom'

import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

@withRouter
// @connect(null,{setToken})
class index extends Component {

  
state={
  username:"",
  password:""
}

setValue = ev => {
  const name = ev.target.name
  const value = ev.target.value
  this.setState(state => ({
    [name]: value
  }))
}

login = async() => {
  // let query = querystring.stringify(this.state)
  // let ret = await axios.get('/api/user' + query)
  let ret = await axios.get("/api/user",{
      username:this.state.username,
      password:this.state.password
    })
    console.log(ret,this.state,ret.data.token)
  this.props.setToken(ret.data.token)
  // let ret = await axios.get('api/user?')
}


  render() {
    const onFinish = values => {
      // console.log('Received values of form: ', values);
    };

    let {username,password} = this.state
    return (
      <Container>
        <div>
        <Form
      name="normal_login"
      className="login-form"
      initialValues={{ remember: true }}
      onFinish={onFinish}
    >
      <div  className="user">
      <Form.Item
        name="username"
        rules={[{ required: true, message: '请输入账号!' }]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />}  
        type="text" 
        value={username} 
        placeholder="账号" 
        onChange={this.setValue} 
        name="username"
        />
      </Form.Item>
      </div>
      <div  className="pass">
      <Form.Item
        name="password"
        rules={[{ required: true, message: '请输入密码!' }]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password" 
          value={password} 
          placeholder="密码" 
          onChange={this.setValue} 
          name="password"
        />
      </Form.Item>
      </div>
      <Form.Item>
        <Form.Item className="rememberpassword" name="remember" valuePropName="checked" noStyle>
          <Checkbox>记住密码</Checkbox>
        </Form.Item>
      </Form.Item>

      <div className="bt">
      <Form.Item>
        <Button type="primary" htmlType="submit" className="btn" onClick={this.login}>
        <NavLink activeClassName="aaaa" to="/home">进入系统</NavLink>
          
        </Button>
      </Form.Item>
      </div>
    </Form>
          {/* <Form 
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
           >
               <div  className="user">
              <label>
                账号：
                
                <input 
                type="text" 
                value={username} 
                placeholder="请输入账号" 
                onChange={this.setValue} 
                name="username"
                rules={[{ required: true, message: 'Please input your username!' }]}
                />
              </label>
              </div>
              <div  className="pass">
              <label>
                密码：
                <input 
                type="password" 
                value={password} 
                placeholder="请输入密码" 
                onChange={this.setValue} 
                name="password"
                rules={[{ required: true, message: 'Please input your password!' }]}
                />
              </label>
              </div>
              <div className="bt">
                <button className="btn" onClick={this.login}>进入系统</button>
              </div>
          </Form> */}
        </div>


      </Container>
    );
  }
}

export default index; 


/* import React,{ Component } from 'react';
import {Container} from './style'

export default class Login extends Component {
    constructor(props){
        super(props);
        this.state = {
            userName: "",
            userPassword: "",
            isRemember: false,
            unameHelp: "",
            upwdHelp: ""
        }
    }
    changeUsername(e){
        let uname = e.target.value;
        this.setState({
            userName: uname
        });
        console.log(this.state.userName);
    }
    changePassword(e){
        let upwd = e.target.value;
        this.setState({
            userPassword: upwd
        })
    }
    handleCheckbox(e){
        let isChecked = e.target.checked;
        if(isChecked){
            this.setState({
                isRemember: true
            })
        }else{
            this.setState({
                isRemember: false
            })
        }
    }
    handleClick(){
        if(this.state.userName === ""||this.state.userName === null){
            this.setState({
                unameHelp: " 用户名不能为空"
            })
        }else if(this.state.userPassword === ""||this.state.userPassword === null){
            this.setState({
                unameHelp: "",
                upwdHelp: " 密码不能为空"
            })
        }else{
            this.setState({ //清除help-block提示文字
                unameHelp: "",
                upwdHelp: ""
            });
  
            if(this.state.isRemember === true){ //是否记住密码，若记住，则保存至localstorage，反之，清除
                // let loginData = {this.state.userName,this.state.userPassword};
                let loginData = {};
                loginData.userName = this.state.userName;
                loginData.userPassword = this.state.userPassword;
               
            }else{
               
            }
  
            this.props.login(this.state.userName,this.state.userPassword);
            console.log(this.state);
        }
    }
    render(){
        return (
          <Container>
            <div className="login-box">

                <div className="login-title"></div>
                <form action="" className="form-horizontal">
                    <div className="form-group input-text">
                        <label htmlFor="uname">账号</label>
                        <input type="text" className="form-control" name="username" id="uname" ref="uname" placeholder="手机号/用户名"
                               onChange={this.changeUsername.bind(this)}/>
                        <span className="help-block">{this.state.unameHelp}</span>
                    </div>
​
                    <div className="form-group input-text">
                        <label htmlFor="upwd">密码</label>
                        <input type="password" className="form-control" name="password" id="upwd" ref="upwd" placeholder="密码"
                               onChange={this.changePassword.bind(this)}/>
                        <span className="help-block">{this.state.upwdHelp}</span>
                    </div>
​
                    <div className="form-group">
                        <label htmlFor="chk" className="check">
                            <input type="checkbox" id="chk" checked={this.state.isRemember} onClick={this.handleCheckbox.bind(this)} />
                            <span>记住密码</span>
                        </label>
                    </div>
​
                    <div className="form-group">
                        <button type="button" onClick={this.handleClick.bind(this,this.state.userName,this.state.userPassword)} className="btn btn-primary login-btn">登录</button>
                    </div>
                </form>
​
            </div>
            </Container>
        )
    }
} */